<template>
  <div class="reserve-record">
    <van-nav-bar
      title="预约发布记录"
      left-text="返回"
      left-arrow
      fixed
      @click="handleBack"
    />

    <!-- <vxe-table border="inner" size="mini" :data="reserveList.reverse()">
      <vxe-column type="seq" width="15"></vxe-column>
      <vxe-column :field="'appointmentPublishCode'" :title="'发布编号'" />
      <vxe-column :field="'publishTime'" :title="'发布时间'" />
      <vxe-column :field="'startTime'" :title="'预约时间'" />
      <vxe-column :field="'action'" width="60">
        <template #default="{ row }">
          <van-button size="mini" type="primary" @click="handleClick(row)">
            查看
          </van-button>
        </template>
      </vxe-column>
    </vxe-table> -->
    <div>
      <van-pull-refresh
        v-model="refreshing"
        loosing-text="下拉刷新"
        @refresh="onRefresh"
      >
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          offset="20"
          :immediate-check="false"
          @load="onLoad"
        >
          <div class="main">
            <van-row class="row row-header" justify="center">
              <van-col :span="2">
                <div class="header">
                  <span>#</span>
                </div>
              </van-col>
              <van-col :span="8">
                <div class="header">
                  <span>发布编号</span>
                </div>
              </van-col>
              <van-col :span="5">
                <div class="header header-align-left">
                  <span>发布时间</span>
                </div>
              </van-col>
              <van-col :span="5">
                <div class="header header-align-left">
                  <span>预约时间</span>
                </div>
              </van-col>
              <van-col :span="4">
                <div class="header">
                  <span>操作</span>
                </div>
              </van-col>
            </van-row>
            <van-row
              v-for="(item, index) in list"
              :key="item"
              class="row"
              justify="center"
            >
              <van-col :span="2">
                <div class="column">
                  <span>{{ 1 + index }}</span>
                </div>
              </van-col>
              <van-col :span="8">
                <div class="column">
                  <span>{{ item.appointmentPublishCode }}</span>
                </div>
              </van-col>
              <van-col :span="5">
                <div class="column">
                  <span>{{ item.publishTime }}</span>
                </div>
              </van-col>
              <van-col :span="5">
                <div class="column">
                  <span>{{ item.startTime }}</span>
                </div>
              </van-col>
              <van-col :span="4">
                <div class="column">
                  <van-button
                    size="mini"
                    type="primary"
                    @click="handleClick(item)"
                  >
                    查看
                  </van-button>
                </div>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <!-- <Table :header="header" :url="url" @toClick="handleClick"></Table> -->
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useBack } from '/@/use/useRouteBack'
import { publishQuery } from '/@/views/reserve/api'
import { onBeforeRouteUpdate, useRouter } from 'vue-router'
import { Reserve } from '../types'
import Table from '../components/table.vue'
import { getData } from '../api'

let header = {
  name: 'counselorName',
  nameKey: '咨询师',
  date: 'date',
  dateKey: '咨询时间',
  startTime: 'startTime',
  startTimeKey: '发布时间',
  endTime: 'endTime',
  endTimeKey: '预约时间',
}

let url = '/api/blade-appointment/appointment/publish/page'

const {
  reserveList,
  handleClick,
  handleBack,
  list,
  loading,
  finished,
  refreshing,
  onLoad,
  onRefresh,
} = useReserveList()

const userInfo = JSON.parse(localStorage.getItem('fock_user_data')!)

function useReserveList() {
  const reserveList = ref<Reserve[]>([])
  let list = ref<Reserve[]>([])

  const router = useRouter()

  onMounted(async () => {
    // const {
    //   data: { data },
    // } = await publishQuery({ tenantId: userInfo.tenantId })

    // reserveList.value = data
    onRefresh()
  })

  let current = ref(1)
  const loading = ref(false)
  const finished = ref(false)
  const refreshing = ref(false)

  const onLoad = async () => {
    if (refreshing.value) {
      refreshing.value = false
    }

    await getData(url, current.value, 10, { tenantId: userInfo.tenantId }).then(
      (res) => {
        let data = res.data.data
        current.value++
        data.records.map((item: Reserve) => {
          list.value.push(item)
        })

        loading.value = false
        if (list.value.length >= res.data.data.total) {
          finished.value = true
        }
      }
    )
  }

  const onRefresh = () => {
    finished.value = false
    loading.value = true
    onLoad()
  }

  return {
    reserveList,
    list,
    loading,
    finished,
    refreshing,
    onLoad,
    onRefresh,
    handleClick(item: Reserve) {
      router.push({
        name: 'ReserveCancel',
        query: { id: item.id, tenantId: userInfo.tenantId },
      })
    },
    handleBack() {
      // router.push({ name: 'ReserveRelease' })
      router.push({
        name: 'ReleaseManege',
      })
      // history.back()
    },
  }
}
</script>

<style lang="less" scoped>
.reserve-record {
  padding-top: 50px;
  margin-bottom: 50px;

  .row {
    margin-top: 8px;
    padding-top: 8px;
    color: #606266;
    border-top: 1px solid #e8eef5;

    .header {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      font-weight: bold;
    }

    .header-align-left {
      justify-content: flex-start;
    }

    .column {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
  }

  .row-header {
    margin-top: 1px;
    padding-top: 5px;
  }
}
</style>
